<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Interactive Footnotes</title>
  <style>
  * {
    box-sizing: border-box;
  }
  
  body {
    font-family: Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
  }
  
  h1, h2, h3 {
    margin-top: 2rem;
  }
  
  p {
    margin-bottom: 1.5rem;
  }
  
  blockquote {
    border-left: 3px solid #ccc;
    padding-left: 1rem;
    margin-left: 0;
    color: #555;
  }
  
  .footnote {
    text-decoration: none;
    color: #0066cc;
    vertical-align: super;
    font-size: 0.75em;
    padding: 0 2px;
  }
  
  .footnote:hover {
    background-color: #f0f8ff;
  }
  
  .footnotes {
    margin-top: 3rem;
    border-top: 1px solid #eee;
    padding-top: 1rem;
  }
  
  .footnotes ol {
    padding-left: 1.5rem;
  }
  
  .footnotes li {
    margin-bottom: 1rem;
    font-size: 0.9em;
    color: #555;
  }
  
  .reversefootnote {
    text-decoration: none;
    color: #0066cc;
    margin-left: 0.5rem;
  }
  
  /* Tooltip styling */
  #footnote-popup {
    position: fixed;
    display: none;
    width: 300px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 12px;
    z-index: 1000;
    font-size: 0.9em;
    line-height: 1.5;
  }
  
  input, textarea {
    font-size: 16px;
    font-family: Helvetica, Arial, sans-serif;
  }
  </style>
</head>
<body>
  <h1>The magic of footnotes</h1>
  
  <p>This is a demonstration of an interactive footnote system similar to the one used in the example. When you write something that needs additional context or a citation, you can add a footnote<sup id="fnref:first" role="doc-noteref"><a href="#fn:first" class="footnote" rel="footnote">1</a></sup>.</p>
  
  <p>Footnotes are helpful for providing more information without disrupting the flow of your main content. They can be used for citations, clarifications, or just to add interesting asides<sup id="fnref:second" role="doc-noteref"><a href="#fn:second" class="footnote" rel="footnote">2</a></sup>.</p>
  
  <blockquote>
    <p>The best footnote is one that adds context without demanding it be read. It should be there for the curious reader, not the casual one.</p>
  </blockquote>
  
  <p>You can use these for technical clarifications as well<sup id="fnref:technical" role="doc-noteref"><a href="#fn:technical" class="footnote" rel="footnote">3</a></sup>. And unlike traditional print footnotes, these are interactive – try hovering over or clicking on the footnote references!</p>
  
  <h2>How it works</h2>
  
  <p>The system uses HTML, CSS, and a bit of JavaScript to make the footnotes interactive. The key components are:</p>
  
  <ol>
    <li>Footnote references in the text with proper IDs and roles</li>
    <li>The footnotes section at the bottom with corresponding IDs</li>
    <li>JavaScript that shows the footnote content when you interact with the reference</li>
  </ol>
  
  <p>The markup follows accessibility standards by using proper ARIA roles. You can even navigate to the footnotes and back using the links<sup id="fnref:navigation" role="doc-noteref"><a href="#fn:navigation" class="footnote" rel="footnote">4</a></sup>.</p>
  
  <hr>
  
  <div class="footnotes" role="doc-endnotes">
    <ol>
      <li id="fn:first" role="doc-endnote">
        <p>This is the first footnote. It provides additional information that would otherwise clutter the main text. <a href="#fnref:first" class="reversefootnote" role="doc-backlink">&#8617;</a></p>
      </li>
      <li id="fn:second" role="doc-endnote">
        <p>This second footnote could be used for citation. For example: Smith, J. (2023). The Art of Footnotes. Journal of Useless Knowledge, 42(1), 123-145. <a href="#fnref:second" class="reversefootnote" role="doc-backlink">&#8617;</a></p>
      </li>
      <li id="fn:technical" role="doc-endnote">
        <p>The footnote system uses the :target CSS selector and JavaScript to enhance the user experience. This technical approach allows for both progressive enhancement and accessibility. <a href="#fnref:technical" class="reversefootnote" role="doc-backlink">&#8617;</a></p>
      </li>
      <li id="fn:navigation" role="doc-endnote">
        <p>The back-link (&#8617;) takes you back to where you came from in the text, which is particularly useful in longer documents. <a href="#fnref:navigation" class="reversefootnote" role="doc-backlink">&#8617;</a></p>
      </li>
    </ol>
  </div>
  
  <!-- Single popup element to be positioned and reused -->
  <div id="footnote-popup"></div>
  
  <script type="module">
// A simplified approach with a single, reliable tooltip

// Create only one popup that we'll reuse
const popup = document.getElementById('footnote-popup');
let currentFootnote = null;

// Function to safely show the popup
function showPopup(footnoteLink) {
  // Safety check - if there's already a popup showing, hide it first
  hidePopup();
  
  // Update current footnote reference
  currentFootnote = footnoteLink;
  
  // Get footnote content from the corresponding footnote at the bottom
  const footnoteId = footnoteLink.getAttribute('href').substring(1);
  const footnoteContent = document.getElementById(footnoteId).innerHTML;
  
  // Set popup content
  popup.innerHTML = footnoteContent;
  
  // Position the popup
  positionPopup(footnoteLink);
  
  // Show the popup
  popup.style.display = 'block';
}

// Function to safely hide the popup
function hidePopup() {
  popup.style.display = 'none';
  currentFootnote = null;
}

// Function to position the popup relative to the footnote link
function positionPopup(footnoteLink) {
  // Get dimensions and position of the footnote link
  const linkRect = footnoteLink.getBoundingClientRect();
  
  // Get dimensions of the viewport
  const viewportWidth = window.innerWidth;
  const viewportHeight = window.innerHeight;
  
  // Calculate initial position (centered below the footnote)
  const linkCenter = linkRect.left + (linkRect.width / 2);
  let popupLeft = linkCenter - 150; // 150px is half the popup width
  let popupTop = linkRect.bottom + 10;
  
  // Adjust horizontal position if needed
  if (popupLeft + 300 > viewportWidth - 20) {
    // Too close to right edge
    popupLeft = viewportWidth - 320; // 300px width + 20px margin
  }
  if (popupLeft < 20) {
    // Too close to left edge
    popupLeft = 20;
  }
  
  // Check if popup would go below viewport
  // We need to measure the height, which means we need to make it visible briefly
  popup.style.visibility = 'hidden';
  popup.style.display = 'block';
  const popupHeight = popup.offsetHeight;
  
  if (popupTop + popupHeight > viewportHeight - 20) {
    // Not enough room below, try to position above
    popupTop = linkRect.top - popupHeight - 10;
    
    // If still no room, position at top of viewport
    if (popupTop < 20) {
      popupTop = 20;
    }
  }
  
  // Set the position
  popup.style.left = `${popupLeft}px`;
  popup.style.top = `${popupTop}px`;
  popup.style.visibility = 'visible';
}

// Set up event listeners for all footnote links
document.querySelectorAll('.footnote').forEach(link => {
  // Mouse enter - show popup
  link.addEventListener('mouseenter', function() {
    showPopup(this);
  });
  
  // Mouse leave - hide popup after delay
  link.addEventListener('mouseleave', function() {
    // Add a small delay to allow mouse to move to the popup
    setTimeout(() => {
      // Only hide if mouse isn't over the popup
      if (!isMouseOverElement(popup)) {
        hidePopup();
      }
    }, 300);
  });
  
  // Click handler - for mobile devices
  link.addEventListener('click', function(event) {
    // Only use special handling on mobile screens
    if (window.innerWidth <= 768) {
      event.preventDefault(); // Prevent jumping to footnote
      
      // Toggle popup if clicking the same footnote
      if (currentFootnote === this) {
        hidePopup();
      } else {
        showPopup(this);
      }
    }
  });
});

// Helper function to check if mouse is over an element
function isMouseOverElement(element) {
  return element.matches(':hover');
}

// Add listener to the popup itself
popup.addEventListener('mouseleave', function() {
  hidePopup();
});

// Hide popup when clicking anywhere else on the page
document.addEventListener('click', function(event) {
  if (!event.target.closest('.footnote') && !event.target.closest('#footnote-popup')) {
    hidePopup();
  }
});

// Handle window resize events
window.addEventListener('resize', function() {
  if (currentFootnote) {
    positionPopup(currentFootnote);
  }
});
  </script>
</body>
</html>
